<template>
  <div class="wrap-setting" >

    <div class="icon-list">

      <a-tooltip v-for="item in list" :key="item.type" >
        <template slot="title">
          <span>{{ item.name }}</span>
        </template>
        <div class="item" @click="item.onClick">
          <a-icon :type="item.icon" />
        </div>

      </a-tooltip>

      <a-dropdown>
        <div class="item"><a-icon type="setting" /></div>
        <a-menu slot="overlay">

          <a-menu-item v-for="item in baseList" :key="item.type" @click="item.onClick">
            <a-icon :type="item.icon" />
            {{ item.name }}
          </a-menu-item>
        </a-menu>
      </a-dropdown>

    </div>

  </div>
</template>

<script >
import { mapState } from "vuex"
import { getAllAnalysisComponentTypes } from '../../../../lib/analysisData'
import getButnList from '../../../../ToolBar/buttonList'

const types = getAllAnalysisComponentTypes()

export default {
  data() {
    return {

    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    type: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String,
      default: "base"
    }
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
      multipleKeys: state => state.multipleKeys
    }),
    baseList() {
      const componentBase = ["topping", "setAtEnd", "delete", "copy", "shear", "paste"]
      return getButnList([...componentBase], true)
    },
    list(){
      let list = []

      // 如果是业务组件
      if (types.includes(this.selectedComponent.type)){
        list = [
          ...list,
          "editAnalysis",
          "dataDetails",

        ]
      }
      list = [
        ...list,
      ]
      return getButnList([...list], true)
    },
  },
  methods: {

  }

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
